<!DOCTYPE html>
<html>
<head>
    <title>控制div属性</title>
    <meta charset="utf-8">
    <style>
        .outer{
            width: 500px;
            margin: 0 auto;
            text-align: center;
            background-color: yellow;
        }

        .show{
            width: 100px;
            height: 100px;
            background: #000;
            margin: 20px auto;
        }
    </style>
    <script>
        function change(elem, att, val){
            console.log(elem);
            elem.style[att] = val;
            // 此处请结合取值来看，只能用【】不能用.取
            console.log(att);
        }

        window.onload = function(){
            var bot = document.getElementsByTagName("input");
            var show = document.getElementById("show");
            var att = ["width","height","background","display", 'display'];
            var val = ["300px", "300px","red","none","block"];
document.getElementsByClassName
            var i;
            for (i=0; i<bot.length; i++){
                bot[i].index = i;
                bot[i].onclick = function(){
                    console.log(this.index);
                    this.index == bot.length - 1 && (show.style.cssText = "");  
                    // 对重置按钮有效 cssText
                    change(show, att[this.index], val[this.index]);
                }
            }
        }

    </script>
</head>
<body>
    <div class="outer">
        <input type="button" value="变宽">
        <input type="button" value="变高">
        <input type="button" value="变色">
        <input type="button" value="隐藏">
        <input type="button" value="重置">
        <div class="show" id="show"></div>
    </div>
</body>

</html>